<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <link href="/css/creatEssay.css" rel="stylesheet" type="text/css"/>
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/css/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wangEditor-3.1.1/release/wangEditor.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/css/cropper.min.css">
    <link rel="stylesheet" href="/css/ImgCropping.css">
    <script type="text/javascript" src="/js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/js/createEssay.js"></script>
    <script type="text/javascript" src="/js/mycategorys.js"></script>
    <script type="text/javascript" src="/js/cropper.min.js"></script>
    <script type="text/javascript" src="/js/exif.js"></script>
    <script type="text/javascript" src="/js/addItem.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="http://resource.teemor.xyz/axios.min.js"></script>

</head>

<body class="body">
<div class="content">
    <div class="head">
        Cloud Note
    </div>
    <div class="_left">
        <div class="operation">
            <a href="/admin/console"><label>操作</label></a>
            <ul>
                <li>
                    <a href="/admin/createEssay">新建文章</a>
                </li>
                <li>
                    <a href="#">草稿箱</a>
                </li>
            </ul>
        </div>

        <div class="classify">
            <label>分类</label>
            <ul id="group_list">
                <li>
                    <a href="/admin/editType">编辑分类</a>
                </li>

            </ul>
        </div>
    </div>


    <div class="editBox" id="content">
           <table>
               <thead>
               <tr>
                   <td width="200px">页面名</td>
                   <td width="300px">图片路径</td>
                   <td width="400px">图片</td>
                   <td width="300px">操作</td>
               </tr>
               </thead>
               <tbody>
               <tr v-for="img in imgs">
                   <td width="200px">{{img.name}}</td>
                    <td width="300px">{{img.path}}</td>
                   <td width="400px"><img v-bind:src="img.path" width="350px"> </td>
                   <td width="300px" >  <div class="btn btn-default" id="replaceImg" v-bind:name="img.name" onclick="ffff(this)">
                       点击上传图片 <img alt="" width=15% src="">
                       <!--<%&#45;&#45;<input class="file" type="file" onchange="addImg(this)"></input>&#45;&#45;%>-->
                   </div></td>
               </tr>

               </tbody>
           </table>



    </div>


    <div class="bt"></div>
    <!--图片裁剪框 start-->
    <div style="display: none;z-index: 999" class="tailoring-container">
        <div class="black-cloth" onclick="closeTailor(this)"></div>
        <div class="tailoring-content">
            <div class="tailoring-content-one">
                <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                    选择图片
                </label>
                <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
            </div>
            <div class="tailoring-content-two">
                <div class="tailoring-box-parcel">
                    <img id="tailoringImg">
                </div>
                <div class="preview-box-parcel">
                    <p>图片预览：</p>
                    <div class="square previewImg"></div>
                    <div class="circular previewImg"></div>
                </div>
            </div>
            <div class="tailoring-content-three">
                <button class="l-btn cropper-reset-btn">复位</button>
                <button class="l-btn cropper-rotate-btn">旋转</button>
                <button class="l-btn cropper-scaleX-btn">换向</button>
                <button class="l-btn sureCut" id="sureCut">确定</button>
            </div>
        </div>
    </div>
    <!--图片裁剪框 end-->
</div>

<script type="text/javascript" >
    var myAxios = axios.create({
        baseURL: '/',
        // timeout: 5000,
        headers: {'Content-Type': 'application/json'}
    });
   var app=new Vue({
       el:"#content",
       data:{
           imgs:"",
           name:"",
           paths:""
       },
       methods:{
           getImgs(){
              var _this=this;
               myAxios.get("/getAllImgPath")
                   .then(function (response) {
                       var data=response.data;
                       _this.imgs=data;
                       console.log("");
                   })
           },
           updatePath(){

           }
       }
   });
   app.getImgs();



    function upCover(file) {
        // var file = $('#upCover').get(0).files[0];
        var form = new FormData();
        form.append("imgFile", file)
        // alert(app._name);
        $.ajax({
            url:"/uploadImgAddToDb",
            type:"post",
            data:form,
            dataType:"JSON",
            cache: false,
            processData: false,
            contentType: false,
            success:function (data) {
                $("#coverImg").attr("src",data.data[0]);
                myAxios.post("updateImgPath",
                    {
                        "name":name,
                        "path":data.data[0]
                    }

                )
                    .then(function (res) {
                        window.self.location;
                    })
            },
            error:function () {
                alert("error")
            }
        })
    }
</script>

</body>



</html>